<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线反馈</title>
    <link rel="stylesheet" href="/Public/css/gxxjkefu-normalize.css">
    <link href="/Public/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="/Public/css/model.css">
    <link rel="stylesheet" href="/Public/css/pager.css">
    <style>
        body{
            font-size: 12px;
        }
        .user_name{
            cursor: pointer;
            color: black;
        }
        .user_name:hover{
            color: #31b0d5;
        }
        .notice_info {
            padding: 25px 0 3%;
            line-height: 35px;
            color: #979797;
            float: left;
            width: 100%;
            background: #ffffff;
        }

        .feedback_ul {
            text-align: center;
            margin: 0 auto 50px;
        }

        .feedback_ul li {
            text-align: center;
            display: inline-block;
            margin: 0 30px;
        }

        .feedback_ul li a {
            color: black;
            padding: 0 0 10px;
        }

        .feedback_ul .a_active {
            color: #57bee9;
            border-bottom: solid 2px #57bee9;
        }

        .search_table thead {
            background: #f0f8fa;
            border: none;
        }

        .table {
            color: #000000;
            margin: 0 auto;
            width: 100% !important;
            text-align: center;
        }

        .search_table input {
            background: none;
            border: none;
        }

        .table > thead > tr > th {
            border-bottom: none !important;
            text-align: center !important;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            border-top: 1px solid #f0f8fa !important;
            text-align: center !important;
        }

        .remark_div {
            color: black;
            height: 340px;
            width: 90%;
            margin: 200px auto 0;
            position: relative;
        }

        .remark_div input {
            position: absolute;
            right: 0;
            bottom: 0;
            background: #57bee9;
            border-radius: 3px;
            border: none;
            color: white;
            margin-top: 20px;
            width: 200px;
            height: 40px;
        }

        .remark_div textarea {
            background: #f5f5f5;
            border: none;
            padding: 1%;
        }
    </style>
</head>
<body>
<div id="main_C" style="float: left;width: 100%" class="animated fadeInRight">
    <div class="title_info">
        <span>逾期管理</span>
    </div>
    <div class="white_bgColor notice_info">
        <!--顶部选项-->
        <ul class="feedback_ul">
            <li><a href="javascript:void(0);" class="a_active">我跟进的订单</a></li>
            <li><a href="javascript:void(0);">逾期已还款</a></li>
            <li><a href="javascript:void(0);">逾期未还款</a></li>
            <li><a href="javascript:void(0);">已移交订单</a></li>
            <li><a href="javascript:void(0);">外呼提醒</a></li>
        </ul>

        <div class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <!--<th>还款订单</th>-->
                    <th>还款金额</th>
                    <th>应还款时间</th>
                    <th>逾期天数</th>
                    <th>逾期罚金</th>
                    <th>最近备注</th>
                    <th>备注人</th>
                    <!--<th>状态</th>-->
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="t_my_lst" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="pageone" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page1"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>

        </div>
        <div style="display: none" class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <!--<th>还款订单</th>-->
                    <th>还款金额</th>
                    <th>应还款时间</th>
                    <th>逾期天数</th>
                    <th>逾期罚金</th>
                    <th>最近备注</th>
                    <th>备注人</th>
                    <!--<th>状态</th>-->
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="t_pay_list" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="pagetwo" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page2"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>
        <div style="display: none" class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <!--<th>还款订单</th>-->
                    <th>还款金额</th>
                    <th>应还款时间</th>
                    <th>逾期天数</th>
                    <th>逾期罚金</th>
                    <th>最近备注</th>
                    <th>备注人</th>
                    <!--<th>状态</th>-->
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="t_nopay_list" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="pagethree" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page3"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>

        </div>
        <div style="display: none" class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <!--<th>还款订单</th>-->
                    <th>还款金额</th>
                    <th>应还款时间</th>
                    <th>逾期天数</th>
                    <th>逾期罚金</th>
                    <th>最近备注</th>
                    <th>备注人</th>
                    <!--<th>状态</th>-->
                    <th>移交类型</th>
                </tr>
                </thead>
                <tbody id="has_move_lst" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="pagefour" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page4"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>
        <div style="display: none" class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <!--<th>还款订单</th>-->
                    <th>还款金额</th>
                    <th>应还款时间</th>
                    <th>逾期天数</th>
                    <th>逾期罚金</th>
                    <th>最近备注</th>
                    <th>备注人</th>
                    <!--<th>状态</th>-->
                    <th>移交类型</th>
                </tr>
                </thead>
                <tbody id="out_lst" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="pagefive" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page5"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/Public/js/jquery-3.2.1.js"></script>
<script src="/Public/js/bootstrap.min.js"></script>
<script src="/Public/js/pager.js"></script>
<script src="/Public/js/layer/layer.js"></script>
<script src="/Public/js/layui/layui.js"></script>

<script>
    //调用父方法

    function user_info(mobile) {
        console.log('useree',mobile);
        window.parent.get_user(mobile);
    }

    function list(url,page,page_id,list_id,page_div,type) {
        $.post(url, {page: page,type:type}, function (data) {
            if (data.code == '1001') {
                var obj = data.result;
                var s = "";
                var len = obj.length;
                sessionStorage.setItem('overdue_total', data.total);
                sessionStorage.setItem('overdue_page', page);
                if (data.count < 10) {
                    $(page_div).hide();
                }
                /*分页*/
                Page({
                    num: data.total,					//页码数
                    startnum: page,				//指定页码
                    elem: $(page_id),		//指定的元素
                    callback: function (n) {	//回调函数
                        list(url,n,page_id,list_id,page_div,type);
                        sessionStorage.setItem('overdue_page', n);
                    }
                });

                for (var i = 0; i < len; i++) {
                    var mark="'" + obj[i].repayment_no + "'";
                    s += " <tr>" +
                        " <td> <a class='user_name' onclick=user_info('"+ obj[i].mobile+"')>" + obj[i].truename + "</a></td> " +
                        " <td>" + obj[i].sex + "</td>" +
                        " <td>" + obj[i].user_mobile + "</td> " +
                        " <td>" + obj[i].repayment_money + "</td>" +
                        " <td>" + obj[i].should_time + "</td>" +
                        " <td>" + obj[i].overdue_day + "</td> " +
                        "<td>" + obj[i].overdue_money + "</td> " +
                        "<td>" + obj[i].mark_reason + "</td> " +
                        "<td>" + obj[i].admin_name + "</td> " ;
                        if(type==3){
                            s+=   "<td>" + obj[i].type + "</td>";
                        }else {
                            s+=   " <td><input class='remark_btn blue_color' type='button' value='备注'  onclick=remark("+mark+") /> " ;
                        }
                       s+= " </td> </tr>";
                }
                document.getElementById(list_id).innerHTML = s;
            } else {
            }
        });
    }


    /*备注*/
    $(document).ready(function () {
        $(".remark_btn").click(function () {
            $(".remark_div").fadeToggle(500);
        });
    });

    //选项卡切换
    $(document).ready(function () {
        $(".feedback_ul li").click(function () {
            $(".search_table").hide().eq($(this).index()).show();
            $(".feedback_ul").find("li a").removeClass("a_active")

            $(this).children("a").addClass("a_active");
            var index = $(this).index() + 1;//获取索引
            sessionStorage.setItem("overdue_type", index - 1);
            sessionStorage.setItem('overdue_page', 1);
            switch (index) {
                case 1://我跟进的订单
                    var url = "<{$SERVER_NAME}>/Overdue/myOverdueList";
                    $.post(url, {page: 1}, function (data) {
                        console.log('909090', data);
                        if (data.code == '1001') {
                            var obj = data.result;
                            var s = "";
                            var len = obj.length;
                            console.log('32232', data.total);
                            if (data.count < 10) {
                                $("#pageone").hide();
                            }
                            /*分页*/
                            Page({
                                num: data.total,					//页码数
                                startnum: 1,				//指定页码
                                elem: $('#page1'),		//指定的元素
                                callback: function (n) {	//回调函数

                                    $.post(url, {page: n, type: 2}, function (data) {
                                        if (data.code == '1001') {
                                            var obj = data.result;
                                            var s = "";
                                            var len = obj.length;
                                            console.log('32232', data.total);

                                            for (var i = 0; i < len; i++) {

                                                var mark="'" + obj[i].repayment_no + "'";
                                                s += " <tr> " +
                                                    "<td> <a class='user_name' onclick=user_info('"+ obj[i].mobile+"')>" + obj[i].truename + "</a></td>  " +
                                                    "<td>" + obj[i].sex + "</td>" +
                                                    " <td>" + obj[i].user_mobile + "</td>" +
                                                    " <td>" + obj[i].repayment_no + "</td>" +
                                                    " <td>" + obj[i].repayment_money + "</td>" +
                                                    " <td>" + obj[i].should_time + "</td> " +
                                                    "<td>" + obj[i].overdue_day + "</td>" +
                                                    " <td>" + obj[i].overdue_money + "</td>" +
                                                    " <td class='red_color'>" + obj[i].status + "</td>" +
                                                    " <td><input class='remark_btn blue_color' type='button' value='备注'  onclick=remark("+mark+") /> " +
                                                  //  "<input class='green_color' type='button' value='工单'/> " +
                                                    "</td> " +
                                                    "</tr>";                                            }
                                            document.getElementById("t_my_lst").innerHTML = s;
                                        }

                                    });
                                }
                            });

                            for (var i = 0; i < len; i++) {

                                var mark="'" + obj[i].repayment_no + "'";
                                s += " <tr> " +
                                    "<td> <a class='user_name' onclick=user_info('"+ obj[i].mobile+"')>" + obj[i].truename + "</a></td>  " +
                                    "<td>" + obj[i].sex + "</td>" +
                                    " <td>" + obj[i].user_mobile + "</td>" +
                                    " <td>" + obj[i].repayment_no + "</td>" +
                                    " <td>" + obj[i].repayment_money + "</td>" +
                                    " <td>" + obj[i].should_time + "</td> " +
                                    "<td>" + obj[i].overdue_day + "</td>" +
                                    " <td>" + obj[i].overdue_money + "</td>" +
                                    " <td class='red_color'>" + obj[i].status + "</td>" +
                                    " <td><input class='remark_btn blue_color' type='button' value='备注'  onclick=remark("+mark+") /> " +
                                  //  "<input class='green_color' type='button' value='工单'/> " +
                                    "</td> " +
                                    "</tr>";                            }
                            document.getElementById("t_my_lst").innerHTML = s;
                        } else {


                        }
                    });
                    break;
                case 2://已还款
                    var url = "<{$SERVER_NAME}>/Overdue/OverdueList";
                    list(url,1,'#page2','t_pay_list','#pagetwo',2);

                    break;
                case 3://未还款
                    var url = "<{$SERVER_NAME}>/Overdue/OverdueList";
                    list(url,1,'#page3','t_nopay_list','#pagethree',1);

                    break;
                case 4://已移交
                    var url = "<{$SERVER_NAME}>/Overdue/Overdue_moveList";
                    list(url,1,'#page4','has_move_lst','#pagefour',3);
                    break;
                case 5://重复提醒
                    var url = "<{$SERVER_NAME}>/Overdue/overdue_mention";
                    list(url,1,'#page5','out_lst','#pagefive');
                    break;
            }
        });
        //  返回前的页面
        var tab_index = parseInt(sessionStorage.getItem('overdue_type'));
        var page = parseInt(sessionStorage.getItem('overdue_page'));
        var survey_total = parseInt(sessionStorage.getItem('overdue_total'));
        console.log('00000tab_index', tab_index);
        console.log('00000page', page);
        console.log('00000survey_total', survey_total);
        if (tab_index >= 0 || page >= 0) {
            if (tab_index == '' || tab_index == null) {
                tab_index = 0;
            }
            if (page == '' || page == null) {
                page = 1;
            }
            $(".search_table").hide().eq(tab_index).show();
            $(".feedback_ul").find("li a").removeClass("a_active");
            $(".feedback_ul li a").eq(tab_index).addClass("a_active");


            switch (tab_index+1) {
                case 1://我跟进的订单
                    var url = "<{$SERVER_NAME}>/Overdue/myOverdueList";
                    $.post(url, {page: page}, function (data) {
                        console.log('909090', data);
                        if (data.code == '1001') {
                            var obj = data.result;
                            var s = "";
                            var len = obj.length;
                            console.log('32232', data.total);
                            if (data.count < 10) {
                                $("#pageone").hide();
                            }
                            /*分页*/
                            Page({
                                num: data.total,					//页码数
                                startnum: 1,				//指定页码
                                elem: $('#page1'),		//指定的元素
                                callback: function (n) {	//回调函数

                                    $.post(url, {page: n, type: 2}, function (data) {
                                        if (data.code == '1001') {
                                            var obj = data.result;
                                            var s = "";
                                            var len = obj.length;
                                            console.log('32232', data.total);

                                            for (var i = 0; i < len; i++) {

                                                var mark="'" + obj[i].repayment_no + "'";
                                                s += " <tr> " +
                                                    "<td> <a class='user_name' onclick=user_info('"+ obj[i].mobile+"')>" + obj[i].truename + "</a></td>  " +
                                                    "<td>" + obj[i].sex + "</td>" +
                                                    " <td>" + obj[i].user_mobile + "</td>" +
                                                    " <td>" + obj[i].repayment_no + "</td>" +
                                                    " <td>" + obj[i].repayment_money + "</td>" +
                                                    " <td>" + obj[i].should_time + "</td> " +
                                                    "<td>" + obj[i].overdue_day + "</td>" +
                                                    " <td>" + obj[i].overdue_money + "</td>" +
                                                    " <td class='red_color'>" + obj[i].status + "</td>" +
                                                    " <td><input class='remark_btn blue_color' type='button' value='备注'  onclick=remark("+mark+") /> " +
                                                    //  "<input class='green_color' type='button' value='工单'/> " +
                                                    "</td> " +
                                                    "</tr>";                                            }
                                            document.getElementById("t_my_lst").innerHTML = s;
                                        }

                                    });
                                }
                            });

                            for (var i = 0; i < len; i++) {

                                var mark="'" + obj[i].repayment_no + "'";
                                s += " <tr> " +
                                    "<td> <a class='user_name' onclick=user_info('"+ obj[i].mobile+"')>" + obj[i].truename + "</a></td>  " +
                                    "<td>" + obj[i].sex + "</td>" +
                                    " <td>" + obj[i].user_mobile + "</td>" +
                                    " <td>" + obj[i].repayment_no + "</td>" +
                                    " <td>" + obj[i].repayment_money + "</td>" +
                                    " <td>" + obj[i].should_time + "</td> " +
                                    "<td>" + obj[i].overdue_day + "</td>" +
                                    " <td>" + obj[i].overdue_money + "</td>" +
                                    " <td class='red_color'>" + obj[i].status + "</td>" +
                                    " <td><input class='remark_btn blue_color' type='button' value='备注'  onclick=remark("+mark+") /> " +
                                    //  "<input class='green_color' type='button' value='工单'/> " +
                                    "</td> " +
                                    "</tr>";                            }
                            document.getElementById("t_my_lst").innerHTML = s;
                        } else {


                        }
                    });
                    break;
                case 2://已还款
                    var url = "<{$SERVER_NAME}>/Overdue/OverdueList";
                    list(url,page,'#page2','t_pay_list','#pagetwo',2);

                    break;
                case 3://未还款
                    var url = "<{$SERVER_NAME}>/Overdue/OverdueList";
                    list(url,page,'#page3','t_nopay_list','#pagethree',1);

                    break;
                case 4://已移交
                    var url = "<{$SERVER_NAME}>/Overdue/Overdue_moveList";
                    list(url,page,'#page4','has_move_lst','#pagefour',3);
                    break;
                case 5://重复提醒
                    var url = "<{$SERVER_NAME}>/Overdue/overdue_mention";
                    list(url,page,'#page5','out_lst','#pagefive');
                    break;
            }
        }else {

            list("<{$SERVER_NAME}>/Overdue/myOverdueList",1,'#page1','t_my_lst','#pageone');
        }

    });
    //备注弹框
    function remark(repayment_no,type){

        console.log('12121',repayment_no);
        console.log('12121',type);
        layer.open({
            title: '备注',
            type: 2,
            area: ['80%', '70%'],
            maxmin: true,
            offset: '100px',
            content: '<{$SERVER_NAME}>/Overdue/overdue_mark.html?repayment_no=' + repayment_no+'&type='+type,
            success: function (layero) {
                layero.find('.layui-layer-min').remove();
            }
        });
    }
</script>

</body>
</html>